<template>
	<view class="content">
		<!-- 桌子信息 -->
		<mch_maekNo :mch="data.mch.title || ''" :markNo="markNo"></mch_maekNo>
		<!-- 一级分类栏 -->
		<goodNav :avttab="avttab" :tabname="tabname" @chage="navtab"></goodNav>
		<!-- 左侧栏 -->
		<view class="tui-fixed-left" :style="{ top: show_top_tab ? '244rpx' : '156rpx' }">
			<scroll-view class="tui-city-scroll" scroll-y style="height: 80%" scroll-with-animation :scroll-top="data.scrollTops">
				<text class="menu-item" :class="index === data.tabCur ? 'menu-active' : ''" v-for="(item, index) in data.avtvalue" :key="index" :id="index" @click="tabNav(index)">
					{{ item.name }}
				</text>
			</scroll-view>
		</view>
		<!-- 右侧栏 -->
		<view class="contents" :style="{ top: show_top_tab ? '244rpx' : '156rpx' }">
			<scroll-view class="tui-city-scroll-y" scroll-y style="height: 80%" scroll-with-animation :scroll-into-view="'scroll-' + data.rightCur" @scroll="scrollLink">
				<view class="pro-item" v-for="(item, index) in data.avtvalue" :key="index" :id="'scroll-' + index">
					<view class="tui-list-head" :id="'NAV' + index">{{ item.name }}</view>
					<view class="tui-list-li">
						<gooditem v-for="(items, indexs) in item.goodsBOList" :key="indexs" :gooditem="items" @sel="sel"></gooditem>
					</view>
				</view>
			</scroll-view>
		</view>
		<!-- 购物车 -->
		<cart :sum_price="sum_price" :sum_count="sum_count" @addshow="addshow" :show="cartshow"></cart>
	</view>
	<!-- 充值活动弹窗 -->
	<wd-popup v-model="data.popshow" custom-style="background:none">
		<payPop :pay="data.pay" :logo="data.mch.logo" @onclone="clone"></payPop>
	</wd-popup>
	<!-- 添加商品弹窗 -->
	<wd-popup v-model="data.show" position="bottom" closable custom-style="min-height:60%">
		<goodPop :item="data.item" @selitem="selitem"></goodPop>
	</wd-popup>
	<!-- 购物车弹窗 -->
	<wd-popup v-model="cartshow" position="bottom" custom-style="min-height:60%">
		<cartPop :list="data.cart_list" :price="sum_price" :count="sum_count" :show="cartshow" @List="cart_good" @show="addshow"></cartPop>
	</wd-popup>
</template>
<script lang="ts" setup>
//外部引用
import { ref, reactive } from 'vue';
import { api } from '@/api/store_api';
import { scenes, set, get, err, to } from '@/utils/uniapi';
import { sum, img, cartimg } from '@/utils/utils';
import { onLoad, onShow } from '@dcloudio/uni-app';
//变量
const data = reactive({
	mchId: '',
	deskId: '',
	user: { mobile: '' },
	mch: { logo: '', title: '' },
	goodlist: [] as any[], //商品列表
	pay: [] as any[], //活动列表
	isclick: true,
	popshow: false,
	scrollTops: 0,
	tabCur: 0,
	rightCur: 0,
	item: { coverUrl: [], title: '', price: '', id: '', goodsSkuBOList: [] },
	show: false,
	remark: '',
	goodsCount: 1,
	avtvalue: [] as any[],
	cart_list: [] as any[]
});
const tabname = ref({});
const avttab = ref('');
const show_top_tab = ref(false);
const markNo = ref(''); //桌号
//购物车变量
const sum_price = ref(0);
const sum_count = ref(0);
const cartshow = ref(false);
//方法
onLoad((e: any) => {
	if (e.scene) {
		const { mchId, deskId } = scenes(e.scene);
		data.deskId = deskId;
		data.mchId = mchId;
		set('mchId', mchId);
		set('deskId', deskId);
	}
});
onShow(async () => {
	try {
		await getuser();
		await Promise.all([get_mch(), zhuo(), goodslist(), cartList(), paylist(), feature()]);
	} catch (e) {
		err(e);
	}
});
async function feature() {
	try {
		const res = await api.feature();
		if (res.respCode === 200) {
			const list = JSON.parse(res.source);
			console.log(list);
			set('mchuse', list);
		}
	} catch (e) {
		err(e);
	}
}
async function goodslist() {
	try {
		const { respCode, source } = await api.dishescla({});
		if (respCode === 200) {
			let goodlist = JSON.parse(source);
			goodlist.forEach((e: any) => {
				e.goodsBOList = img(e.goodsBOList);
			});
			type(goodlist);
			data.goodlist = goodlist;
		}
	} catch (error) {
		err(error);
	}
}
function type(arr: any) {
	try {
		let vshow_top_tab = false;
		let vtabname = {};
		arr.forEach((e: any) => {
			const bool = e.name.includes('-');
			if (bool) {
				vshow_top_tab = true;
			}
			const i = e.name.indexOf('-');
			const name = bool ? e.name.substring(0, i) : e.name;
			const item = bool ? { ...e, name: e.name.split('-').pop() } : e;
			vtabname[name] = vtabname[name] || [];
			vtabname[name].push(item);
		});
		const vavttab = Object.keys(vtabname)[0];
		const vavtvalue: any = Object.values(vtabname)[0] || [];
		if (vshow_top_tab) {
			show_top_tab.value = vshow_top_tab;
			tabname.value = vtabname;
			data.avtvalue = vavtvalue;
			avttab.value = vavttab;
		} else {
			show_top_tab.value = vshow_top_tab;
			data.avtvalue = arr;
		}
	} catch (error) {
		err(error);
	}
}
async function cartList() {
	try {
		const deskId = get('deskId');
		const { respCode, source } = await api.cartList({ deskId });
		if (respCode === 200) {
			let vcart_list = JSON.parse(source);
			vcart_list = cartimg(vcart_list);
			data.cart_list = vcart_list;
			const sumobj = sum(vcart_list);
			sum_price.value = sumobj.sum_price;
			sum_count.value = sumobj.sum_count;
		}
	} catch (error) {
		err(error);
	}
}
async function paylist() {
	try {
		const { respCode, source } = await api.payList({ status: 'NORMAL' });
		if (respCode === 200) {
			const list = JSON.parse(source);
			if (list.length > 0 && data.isclick) {
				data.pay = list;
				data.isclick = false;
				data.popshow = true;
			}
		}
	} catch (error) {
		err(error);
	}
}
async function getuser() {
	try {
		const res = await api.userxx();
		if (res.respCode === 200) {
			const { respCode, source } = await api.getuser();
			if (respCode === 200) {
				const vuser: any = JSON.parse(source);
				data.user = vuser;
				set('user', vuser);
			}
		} else {
			err(res.msg);
		}
	} catch (error) {
		err(error);
	}
}
async function get_mch() {
	try {
		const id = get('mchId');
		const { respCode, source } = await api.getmch({ id });
		if (respCode === 200) {
			const vmch = JSON.parse(source);
			data.mch = vmch;
			set('mch', vmch);
		}
	} catch (error) {
		err(error);
	}
}
async function zhuo() {
	try {
		const id = get('deskId');
		const { respCode, source } = await api.seated({ id });
		if (respCode === 200) {
			const vmarkNo = JSON.parse(source).markNo;
			set('markNo', vmarkNo);
			markNo.value = vmarkNo;
		}
	} catch (error) {
		err(error);
	}
}
async function sel(e: any) {
	try {
		if (data.user.mobile === '') {
			wx.showModal({
				title: '提示',
				content: '检测到您还未登录，是否前往登录',
				complete: (res: any) => {
					if (res.confirm) {
						to('/pages/login/login');
					}
				}
			});
			return;
		}
		const { id } = e;
		data.show = true;
		const { respCode, source } = await api.Dtlgoods({ id });
		if (respCode === 200) {
			let item = JSON.parse(source);
			item.coverUrl = JSON.parse(item.coverUrl);
			data.item = item;
		}
	} catch (error) {
		err(error);
	}
}
function selitem() {
	data.show = false;
	cartList();
}
function cart_good() {
	cartList();
}
function addshow(e: any) {
	cartshow.value = e.shows;
}
function navtab(e: any) {
	(avttab.value = e.key), (data.avtvalue = e.value);
	data.tabCur = 0;
}
function clone() {
	data.popshow = false;
}
function tabNav(index: any) {
	(data.tabCur = index), (data.rightCur = index);
	data.scrollTops = (index - 4) * 50;
}
function scrollLink(e: any) {
	const { avtvalue } = data;
	const goodlist = [...avtvalue];
	let itemHeight = 0;
	const updateGoodlist = () => {
		return new Promise<void>((resolve) => {
			const promises = goodlist.map((item, i) => {
				return new Promise<void>((resolve) => {
					const els = wx.createSelectorQuery().select('#scroll-' + i);
					els.fields({ size: true }, function (res) {
						item.top = itemHeight;
						itemHeight += res.height;
						item.bottom = itemHeight;
						resolve();
					}).exec();
				});
			});
			Promise.all(promises).then(() => {
				resolve();
			});
		});
	};
	const updateDate = () => {
		data.avtvalue = goodlist;
	};
	const scrollTop = e.detail.scrollTop;
	let selectedTabCur = -1;
	let selectedScrollTops = 0;
	for (let i = 0; i < goodlist.length; i++) {
		if (scrollTop > goodlist[i].top && scrollTop < goodlist[i].bottom) {
			selectedTabCur = i;
			selectedScrollTops = (i - 4) * 50;
			break;
		}
	}
	updateGoodlist().then(() => {
		updateDate();
		if (selectedTabCur !== -1) {
			(data.tabCur = selectedTabCur), (data.scrollTops = selectedScrollTops);
		}
	});
}
</script>
<style lang="scss" scoped>
.tui-fixed-left {
	width: 180rpx;
	height: 100%;
	border-right: 1px solid #dfdfdf;
	position: fixed;
	background-color: #f5f5f5;
	top: 244rpx;
	left: 0;
	padding-bottom: 104rpx;
}

.tui-list-head {
	height: 65rpx;
	line-height: 65rpx;
}
.tui-city-scroll {
	width: 100%;
}
.menu-item {
	font-size: 26rpx;
	box-sizing: border-box;
	height: 100rpx;
	line-height: 100rpx;
	width: 180rpx;
	background-color: #fff;
	display: block;
	border-bottom: 1px solid #dfdfdf;
	position: relative;
	z-index: 10;
	text-align: center;
}
.menu-active {
	border-left: 10rpx solid #e93838;
	background-color: #fff;
}
.contents {
	width: 570rpx;
	box-sizing: border-box;
	padding-left: 20rpx;
	padding-right: 20rpx;
	height: 100%;
	position: fixed;
	top: 244rpx;
	right: 0;
	padding-bottom: 104rpx;
	background-color: #fff;
}
.tui-city-scroll-y {
	height: 100%;
	box-sizing: border-box;
}
.tui-list-head {
	height: 65rpx;
	line-height: 65rpx;
	font-size: 28rpx;
	font-weight: 700;
}
.tui-list-li {
	background-color: #fff;
	overflow: hidden;
	color: #fff;
	font-size: 50rpx;
	box-sizing: border-box;
}
.goods-box {
	width: 170rpx;
	overflow: hidden;
	margin-right: 10rpx;
	float: left;
}
.tui-list-li .goods-box:nth-child(3n) {
	margin-right: 0rpx;
}
</style>
